 <template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearFix">
        <h2>系统管理员信息</h2>
      </div>
      <el-collapse v-model="activeName" accordion>
        <el-collapse-item title="管理员" name="1">
          <!-- 选择课程 -->
          <el-dialog title="添加管理员" :visible.sync="dialogVisible" width="60%">
            <div>
              <el-input
                type="textarea"
                rows="4"
                v-model.trim="phoneNumber"
                clearable
                placeholder="录入内测用户手机号（手机号用“, ”隔开）"
              ></el-input>
            </div>
            <div slot="footer">
              <el-button
                class="filter-item add-style"
                style="margin-left: 10px;"
                type="primary"
                @click="handleCreate"
                size="mini"
              >添加</el-button>
            </div>
          </el-dialog>

          <el-dialog title="创建结果" :visible.sync="resultVisible" width="60%">
            <div>
              <div>
                <h3>号码已存在</h3>
                <div>
                  <span v-if="resultData.existPhones.length === 0">无</span>
                  <span v-for="(item, index) in resultData.existPhones" :key="index">{{item}}</span>
                </div>
              </div>
              <hr>
              <div>
                <h3>用户不存在</h3>
                <div>
                  <span v-if="resultData.noneUser.length === 0">无</span>
                  <span v-for="(item, index) in resultData.noneUser" :key="index">{{item}}</span>
                </div>
              </div>
              <hr>
              <div>
                <h3>号码已添加</h3>
                <div>
                  <span v-if="resultData.successPhones.length === 0">无</span>
                  <span v-for="(item, index) in resultData.successPhones" :key="index">{{item}}</span>
                </div>
              </div>
            </div>
            <div slot="footer">
              <el-button
                class="filter-item add-style"
                style="margin-left: 10px;"
                type="primary"
                @click="resultVisible = false"
              >关闭</el-button>
            </div>
          </el-dialog>

          <!-- 已配置内测用户 -->
          <div class="filter-container">
            <div>
              <el-button
                class="filter-item add-style"
                style="margin: 10px;"
                type="primary"
                size="mini"
                icon="el-icon-circle-plus-outline"
                @click="dialogVisible = true"
              >添加</el-button>
            </div>
          </div>

          <tTable :columns="columns" :data="tableData">
            <!-- 头像 -->
            <template v-slot:avatar="slotProps">
              <img :src="slotProps.scope.row.avatar" class="avatar" alt>
            </template>

            <!-- 操作 -->
            <template v-slot:operate="slotProps">
              <el-button
                v-if="!slotProps.scope.row.default"
                @click.native.prevent="deleteRow(slotProps.scope.row.id)"
                type="danger"
                size="mini"
              >删除</el-button>
            </template>
          </tTable>
        </el-collapse-item>
        <el-collapse-item title="修改邮箱" name="2">
          <el-form ref="formData" :model="formData" label-width="200px">
            <el-form-item
              prop="email"
              label="管理员邮箱"
              :rules="[{ required: true, message: '请输入管理员邮箱', trigger: 'blur' },
                { type: 'email', message: '请输入正确的邮箱', trigger: ['blur', 'change'] }]"
            >
              <el-input class="input-width" v-model="formData.email" placeholder="请输入邮箱地址"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button class="widthBtn add-style" type="primary" @click="confirmEmail">提交</el-button>
            </el-form-item>
          </el-form>
        </el-collapse-item>
        <el-collapse-item title="修改密码" name="3">
          <el-form ref="passwordData" :model="passwordData" label-width="140px">
            <el-form-item
              label="原始密码"
              prop="prePassword"
              :rules="[{ required: true, message: '请输入原密码', trigger: 'blur' }]"
            >
              <el-input
                class="input-width"
                v-model="passwordData.prePassword"
                placeholder="请输入原始密码"
                show-password
                type="password"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="新密码"
              prop="password"
              :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]"
            >
              <el-input
                type="password"
                show-password
                class="input-width"
                v-model="passwordData.password"
                placeholder="请输入新密码"
              ></el-input>
            </el-form-item>
            <el-form-item label="新密码确认" :rules="validatePass" prop="confirmPassword">
              <el-input
                show-password
                type="password"
                class="input-width"
                v-model="passwordData.confirmPassword"
                placeholder="请确认新密码"
              ></el-input>
            </el-form-item>

            <el-form-item>
              <el-button class="widthBtn add-style" type="primary" @click="changePassword">修改密码</el-button>
            </el-form-item>
          </el-form>
        </el-collapse-item>
      </el-collapse>
      <div></div>
    </el-card>
  </div>
</template>

<script>
import {
  setPassword,
  setEmail,
  getManager,
  addManager,
  deleteManager
} from "api/profile";
import { formatDateTime } from "src/util/time.js";
import tTable from "src/components/table/index.vue";

export default {
  data() {
    return {
      formData: {
        email: ""
      },
      phone: "",
      passwordData: {
        prePassword: "",
        password: "",
        confirmPassword: ""
      },
      validatePass: [
        {
          validator: (rule, value, callback) => {
            if (value === "") {
              return callback(new Error("请再次输入密码"));
            } else if (value !== this.passwordData.password) {
              return callback(new Error("两次输入密码不一致!"));
            } else {
              return callback();
            }
          },
          trigger: "blur"
        }
      ],
      activeName: "1",

      phoneNumber: "", //输入得手机号码
      dialogVisible: false, // 是否显示添加模态框
      tableData: [], // 内测用户数据
      multipleSelection: "", // 多选
      resultVisible: false, // 结果显示页面
      resultData: {
        existPhones: [],
        noneUser: [],
        successPhones: []
      }, // 添加结果
      
      columns: [
        {
          attr: { label: "", type: "index", width: "55" }
        },
        {
          attr: { prop: "nickName", label: "用户名" }
        },
        {
          slot: "avatar",
          attr: { prop: "avatar", label: "头像" }
        },
        {
          attr: { prop: "phone", label: "手机号码"}
        },
        {
          attr: { prop: "createTime", label: "注册时间" }
        },
        {
          slot: "operate",
          attr: { label: "操作", width: "220" }
        }
      ]
    };
  },
  props: {
    enterpriceInfo: {
      type: Object,
      default() {
        return [];
      }
    }
  },
  components: { tTable },
  watch: {
    enterpriceInfo: {
      handler: function(newVal, oldVal) {
        this.enterpriceInfo = newVal;
        this.dataInit();
      },
      deep: true
    }
  },
  mounted() {
    this.getData(1);
  },
  methods: {
    dataInit() {
      for (var i in this.formData) {
        for (var enterItem in this.enterpriceInfo) {
          if (i === enterItem) {
            this.formData[i] = this.enterpriceInfo[enterItem];
          }
        }
      }
    },
    changePassword() {
      this.$refs.passwordData.validate(valid => {
        if (valid) {
          let data = {
            oldPassword: this.passwordData.prePassword,
            newPassword: this.passwordData.password
          };

          setPassword(data).then(res => {
            this.$message.success("修改成功");
            this.$refs.passwordData.resetFields();
          });
        } else {
          return false;
        }
      });
    },
    confirmEmail() {
      setEmail(this.formData.email).then(res => {
        this.$message.success("邮箱修改成功");
      });
    },
    deleteRow: function(id) {
      this.$confirm("确认删除管理员么").then(_ => {
        deleteManager(id).then(res => {
          this.getData();
          this.$message.success("删除成功");
        });
      });
    },
    handleCreate: function() {
      if (!this.phoneNumber) return;

      addManager(this.phoneNumber).then(res => {
        if (res === true) {
          this.$message.success("创建成功");
          this.dialogVisible = false;
          this.getData();
          return;
        }

        if (res.existPhones.length === 0 && res.noneUser.length === 0) {
          this.$message.success("创建成功");
        } else {
          this.resultVisible = true;
          this.resultData = res;
        }

        this.dialogVisible = false;
        this.getData();
        this.phoneNumber = "";
      });
    },
    getData() {
      getManager().then(res => {
        this.tableData = res.map(item => {
          item.createTime = formatDateTime(item.createTime);
          return item;
        });
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  }
};
</script>

<style lang="scss" scoped>
@import "src/style/mixin";
.longTerm-style {
  color: #888;
  padding: 10px;
}

.input-width {
  width: 400px;
}

.upload-width {
  width: 400px;
}
.cascader-style {
  width: 300px;
  margin-bottom: 20px;
}

.widthBtn {
  width: 200px;
  margin: 20px 200px 0 0;
}

.avatar {
  width: 60px;
  height: 60px;
  border-radius: 8px;
}
</style>
